template>
  <div id="allBox">
    <!--头部-->
    <div class="topBox">
      <div class="tb">
        <span class="el-icon-collection-tag"></span>
        <span>我的收藏</span>
      </div>
    </div>
    <!--主体部分-->
    <div class="wbodyBox" v-if="!allData">
      <div class="wbB">
        <div></div>
        <div>
          <h2>您的收藏还是空的!</h2>
          <p>快去购物吧!</p>
        </div>
      </div>
    </div>
    <!--商品盒子-->
    <div class="shopbox" v-if="allData">
      <ul>
        <li v-for="(item, index) in allData" :key="index">
          <router-link
            :to="{
              path: '/particulars',
              query: { productID: item.product_id },
            }"
          >
            <!-- <el-popover
              class="delv"
              placement="bottom"
              title="标题"
              width="200"
              trigger="click"
              content="您确定要删除吗"
            >
              <span @click.prevent="remove(item.product_id)"
                >X</span
              >
            </el-popover> -->
              <span class="delv" @click.prevent="remove(item.product_id)"
                >X</span
              >
            <img
              :src="'http://106.15.179.105:3000/' + item.product_picture"
              alt=""
            />
            <h2 class="lcp1">{{ item.product_name }}</h2>
            <h3 class="lcp1">{{ item.product_title }}</h3>

            <p>
              <span>{{ item.product_selling_price }}元</span
              ><span
                ><del v-if="item.product_selling_price != item.product_price"
                  >{{ item.product_price }}元</del
                ></span
              >
            </p>
          </router-link>
        </li>
      </ul>
    </div>
    <login-module ref="loginRef"></login-module>
  </div>
</template>

<script>
import particularsAPI from "../../api/particulars";
export default {
  components: {},
  name: "",
  data() {
    return {
      allData: [],
    };
  },
  created() {
    // console.log(this.$store.state.userName);
    // console.log(this.$refs);
  },
  activated() {
    this.part();
  },
  methods: {
    //获取所有数据
    async part() {
      let { data: res } = await particularsAPI.getAllsData({
        user_id: this.$store.state.user_id,
      });
      console.log(res.collectList);
      this.allData = res.collectList;
    },
    //删除单条商品数据
    async remove(id) {
      let { data: res } = await particularsAPI.getdelData({
        user_id: this.$store.state.user_id,
        product_id: id,
      });
      console.log(res);
      if (res.code == "001") {
        this.$notify({
          message: res.msg,
          type: "success",
        });
        this.$router.go("/collect");
      }
    },
  },

  //刚进入组件的时候调用
  beforeRouteEnter: (to, from, next) => {
    next((vm) => {
      console.log(vm);
      if (
        to.path == "/" ||
        to.path == "/particulars" ||
        to.path == "/allShop"
      ) {
        next();
      } else if (vm.$store.state.userName == "") {
        alert("还没有登录，请先登录！");

        vm.$refs.loginRef.$data.dialogFlag = true;
        next(false);
      } else {
        next();
      }
    });
  },
};
</script>

<style lang="scss" scoped>
#allBox {
  background-color: #f5f5f5;
  .topBox {
    width: 100%;
    height: 64px;
    border-bottom: 2px solid orangered;
    background-color: white;
    .tb {
      width: 1225px;
      margin: 0 auto;
      height: 64px;
      line-height: 64px;
      font-size: 28px;
    }
    span:nth-child(1) {
      color: orangered;
      margin-right: 10px;
    }
  }
  .wbodyBox {
    padding-top: 64px;
    width: 1225px;
    min-height: 450px;

    margin: auto;
    .wbB {
      width: 100%;
      align-items: center;
      display: flex;
      div:nth-child(1) {
        width: 50%;
        height: 450px;
        background: url(../../../public/cart-empty.png) no-repeat 214px 0;
      }
      div:nth-child(2) {
        flex: 1;
        height: 450px;
        margin: auto 0;
        h2 {
          margin: 70px 0 15px;
          font-size: 36px;
          color: #b0b0b0;
        }
        p {
          margin: 0 0 20px;
          font-size: 20px;
          color: #b0b0b0;
        }
      }
    }
  }
  .shopbox {
    padding-top: 64px;
    width: 1225px;
    min-height: 450px;
    margin: auto;
  }
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  li {
    width: 229px;
    height: 295px;
    margin: 0 0 14.5px 16px;
    padding: 10px 0;
    background-color: white;
    text-align: center;
      .delv {
        position: absolute;
        right: 10px;
        top: 10px;
        padding: 3px;
      }
    

    img {
      display: block;
      width: 160px;
      height: 160px;
      margin: 0 auto;
    }
    h2 {
      color: #333333;
      font-size: 14px;
      margin: 25px 10px 0px;
    }
    h3 {
      color: #b0b0b0;
      font-size: 12px;
      margin: 5px 10px;
    }
    .lcp1 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    p {
      font-size: 16px;
      span:nth-child(1) {
        color: #ff6700;
        font-size: 16px;
      }
      span:nth-child(2) {
        color: #b0b0b0;
        font-size: 16px;
        margin-left: 8px;
      }
    }
  }
  li:hover {
    transform: translateY(-5px);
    transition: all 0.5s;
    box-shadow: 1px 1px 20px 2px rgba(0, 0, 0, 0.3);
  }
}
</style>